<template>
  <view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view
          class="uni-list-cell-navigate uni-navigate-right uni-media-list"
          v-for="(value,key) in list"
          :key="key"
		  
        >
          <view class="uni-media-list-logo">
            <image v-if="showImg" :src="value.img"></image>
          </view>
          <view class="uni-media-list-body">
            <view class="uni-media-list-text-top">{{value.title}}</view>
            <view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: "media-list",
      showImg: false,
      list: [
        {
          title: "手机联系人",
          content: "添加或者邀请通讯录好友",
          img:
            "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
        },
        {
          title: "扫一扫",
          content: "扫描二维码添加朋友",
          img:
            "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
        },
        {
          title: "面对面建群",
          content: "与身边的朋友进入同一个群聊",
          img:
            "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
        }
      ]
    };
  },
  onLoad() {
    setTimeout(() => {
      this.showImg = true;
    }, 400);
  }
};
</script>

<style>
.title {
  padding: 20upx;
}
.uni-list {
  margin-top: 20upx;
}
/* .uni-list-cell{
	height: 84upx;
	line-height: 84upx;
	margin-top: 20upx;
} */
.uni-list-cell-navigate.uni-navigate-right:after {
  right: 40upx;
}
.uni-list-cell {
  flex-wrap: wrap;
}
.uni-media-list {
  margin-bottom: 50upx;
  background: #fff;
  /* border: none; */
}
.uni-list {
  background: #f8f8f8;
}
.uni-list::before {
  height: 0px;
}
.uni-list::afeter {
  height: 0px;
}
</style>
